import { useRef } from 'react';
import { Form, Radio, Switch } from 'antd';
import { ExclamationCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import ButtonFields from '../components/ButtonFields';
import { addCustomButton } from '../../utils';

export default function OpButton(props: any) {
  const { form } = props;
  const buttonFieldsRef = useRef<any>();

  const op = (
    <div className='custom-title'>
      <div className='custom-title-text'>操作按钮</div>
      <div className='custom-title-extra' onClick={() => { addCustomButton(buttonFieldsRef) }}><PlusCircleOutlined style={{ color: 'var(--inbiz-color-primary)' }} />自定义按钮</div>
    </div>
  );

  return (
    <>
      <Form.Item label={op} name={['buttonSetting', 'actions']} className='bpmn-custom-properties-operation-button'>
        <ButtonFields type='userTask' form={form} ref={buttonFieldsRef}/>
      </Form.Item>
      <Form.Item
        label='允许退回'
        name={['buttonSetting', 'inReturnsBack']}
        valuePropName='checked'
        hidden
      >
        <Switch />
      </Form.Item>
      <Form.Item
        label='退回按钮配置'
        name={['buttonSetting', 'returnsBackButtonConfig']}
        hidden
      >
      </Form.Item>
      <Form.Item
        label='允许加签'
        name={['buttonSetting', 'plusSign']}
        valuePropName='checked'
        hidden
      >
        <Switch />
      </Form.Item>
      <Form.Item
        label='退回指派人'
        name={['buttonSetting', 'isReturnToDesignator']}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        colon={false}
        valuePropName='checked'
        hidden
      >
        <Switch />
      </Form.Item>
      {/* <Form.Item
        label='退回发起人重新发起后'
        name={['buttonSetting', 'restart']}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        colon={false}
        hidden
      >
        <Checkbox.Group>
          <Checkbox value={'isReturnStarter'}>重新依次审批</Checkbox>
          <Checkbox value={'isCdirectBack'}>从当前节点审批</Checkbox>
        </Checkbox.Group>
      </Form.Item> */}
      <Form.Item
        label='加签逻辑'
        name={['buttonSetting', 'plusSignLogic']}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        colon={false}
        hidden
      >
        <Radio.Group defaultValue={'skipCurrent'}>
          <Radio value={'skipCurrent'}>前加签</Radio>
          <Radio value={'skipNext'}>后加签</Radio>
          <Radio value={'customSkip'}>自定义</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        label={<>被动完成转加签<ExclamationCircleOutlined title='配置是否将多人任务中的被动完成审批人加入到后加签节点进行审批' style={{ margin: '0 4px', cursor: 'pointer' }} /></>}
        name={['buttonSetting', 'signingRules']}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        valuePropName='checked'
        colon={false}
        hidden
      >
        <Switch />
      </Form.Item>
      <Form.Item
        label='加签按钮设置'
        name={['buttonSetting', 'plussignActions']}
        style={{ marginTop: 24 }}
        hidden
      >
        {/* <ButtonTable /> */}
      </Form.Item>
    </>
  );
}
